<template>
	<view style="padding-top:28upx;">
		<view class="card-menu cu-list" v-for="(item,index) in list" :key="index">
			<navigator hover-class="none" :url="`/jvss/pageCloud/order/orderDetails?orderId=${item.orderId}`">
				<view class="flex p-xs mb-sm bg-white">
					<view class="flex-treble padding-sm margin-xs radius">
						<!-- 订单号 -->
						<text>订单号：</text>{{item.tradeNo}}
					</view>
					<view class="flex-sub padding-tb-sm margin-xs radius text-white text-right">
						<view v-if="item.refundStep==2 || item.refundStep==3 || item.refundStep==4 || item.refundStep==5">
							<!-- 退款6种状态: 已退款  申请退款中  退款审核中  拒绝退款-->
							<text class="cu-tag round bg-red">
								<text v-if="item.refundStep==2">已退款</text>
								<text v-else-if="item.refundStep==3">申请退款中</text>
								<text v-else-if="item.refundStep==4">退款审核中</text>
								<text v-else-if="item.refundStep==5">拒绝退款</text>
							</text>
						</view>
						<view v-else>
							<text v-if="item.status==='finish'" class="cu-tag round bg-green">已开通</text>
							<text v-else-if="item.status==='create'" class="cu-tag round bg-orange">待支付</text>
							<text v-else-if="item.status==='pay'" class="cu-tag round bg-blue">已支付</text>
							<text v-else-if="item.status==='invalid'" class="cu-tag round bg-reds">已失效</text>
							<text v-else-if="item.status==='openNext'" class="cu-tag round bg-olive">次月生效</text>
							<text v-else-if="item.status==='refund'" class="cu-tag round bg-red">已退款</text>
						</view>	
					</view>
				</view>
				<view class="cu-list menu orderDetail">
					<view class="cu-item bg-white">
						<!-- 图片 -->
						<view v-if="item.icon" class="cu-avatar lg" style="background-color: white;" :style="{backgroundImage:'url('+item.icon+')'}"></view>
						<view v-else class="cu-avatar radius lg testOrder_imgNull"></view>
						<!-- 文本 -->
						<view class="content" style="padding-left:10upx">
							<view class="text-grey line-limit-one-length" style="padding-left:10upx;">
								<text v-if="item.channel!=null">
									<text v-if="item.channel===-1"></text>
									<text v-else>[{{item.channel+1}}通道]</text>
								</text>
								{{item.classifyName}}
							</view>
							<view class="text-primary text-sm line-limit-one-length"><text class="text-red  margin-right-xs"></text>{{item.goodsName}}</view>
						</view>
						<!-- 价格信息 -->
						<view class="listRContent">
							<view v-if="item.discount&&parseInt(item.discount)!=0" class="text-grey text-xs text-right">-&nbsp;{{item.discount}}</view>
							<view class="text-red text-md text-right">{{item.currencyUnit}}{{item.price}}</view> 
						</view>
					</view>
				</view>
			</navigator>
			<childOrder :list="item.childOrderList"></childOrder>
			<view class=" p-xs mb-sm bg-white padding-sm">
				<view class="text-right">
					<!-- 退款 -->
					<view v-if="item.refundStep==1">
						<button v-if="item.refundCountdown>0" class="cu-btn orderBtn round line-gray">{{item.refundCountdown}}分钟后可申请退款</button>
						<button v-else class="cu-btn orderBtn round line-gray" @tap="actionClick('refund',item,index)">退款</button>
					</view>
					<!-- 支付 -->
					<button v-if="item.status==='create'" class="cu-btn orderBtn round line-primary"
					data-target="payModal" @tap="actionClick('pay',item,index)">支付</button><!-- 支付 -->
					<!-- 删除 -->
					 <button v-if="item.status!='finish' && item.status!='pay' && item.status!='openNext'" class="cu-btn orderBtn round line-reds margin-left-sm"
					  data-target="UnsubscribeModal" @tap="actionClick('delete',item,index)">删除</button><!-- 删除 -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import childOrder from './childOrder.vue'
  export default {
	  components:{childOrder},
    props:{
      list:{
        type:Array,
        default:()=>{
          return []
        }
      }
    },
    data() {
      return {

      }
    },
    onLoad(opt) {

    },
    onShow() {

    },
    methods: {
      actionClick(type,item,index) {
        this.$emit('actionClick',type,item,index)
      },
    }
  }
</script>

<style lang="less" scope>
@import '@/common/style/main.css';
	.testOrder_imgNull{
		background-image: url('https://statics.xmcsrv.net/weixin/cloud/imgNull.png');
		background-color: #fff!important;
	}
	.listRContent{
		line-height: 1.6em;
	}
</style>

